import {Component} from 'react'
import Taro from '@tarojs/taro'
import {View, Text, Picker} from '@tarojs/components'
import 'taro-ui/dist/style/index.scss'
import {
  AtButton,
  AtSearchBar,
  AtIcon,
  AtList,
  AtListItem,
  AtCalendar,
  AtTabs,
  AtTabsPane,
  AtTabBar, AtForm, AtInput
} from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import '../index/index.less'
import './appointment.less'

export default class AppointmentMoreInfo extends Component {
  state = {
    value: "",
    current: 0,
    dateSel: '',
    nameList: ['姓名', '姓名'],
    nameSel: '请选择'
  }

  /*接受跳转参数*/
  componentWillMount (){
    // console.log(this.$router.params)
  }

  /*搜索*/
  onSearch(value) {
    this.setState({
      value: value
    })
  }

  onActionClick() {
    console.log('开始搜索')
  }

  /*页面切换*/
  handleClick(value) {
    this.setState({
      current: value
    })
  }

  /*时间选择*/
  onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    })
  }
/*
  onTimeChange() {
    const {yearList, dayList} = this.state
    let ranges = [[], []]
    for (let i = 0; i < yearList.length; i++) {
      ranges[0].push(yearList[i].name)
    }
    for (let i = 0; i < dayList.length; i++) {
      ranges[1].push(dayList[i].name)
    }
    this.setState({
      rangeTime: ranges,
    })
  }

  columnTimeChange(e) {
    const {yearList, dayList} = this.state
    const column = e.detail.column
    const evalue = e.detail.value
    let yearListNum = value[0]
    let dayListNum = value[1]
    if (column == 0) {
      yearListNum = evalue
      const id = yearList[yearListNum].id
      this.setState({
        value: [yearListNum, 0],
        dayList: address.dayList[id],
      }, () => {
        this.onNameChange()
      })
    } else if (column == 1) {
      cityNum = evalue
      const id = citys[cityNum].id
      // console.log(id)
      this.setState({
        value: [yearListNum, dayListNum],
      }, () => {
        this.onNameChange()
      })
    }
  }
*/
  onNameChange = e => {
    this.setState({
      nameSel: this.state.nameList[e.detail.value]
    })
  }

  handleChange(value) {
    this.setState({
      value
    })
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }

  /*跳转*/
  toAppointmentSuccess() {
    Taro.navigateTo({
      url: '/pages/appointment/appointmentSuccess'
    })
  }

  /*请求*/
  addRegisterRef() {
    Taro.request({
      url: 'http://127.0.0.1:80/appointment/addRegisterRef', //仅为示例，并非真实的接口地址
      data: {
        usercode: '',
        patient_code: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)
        this.toAppointmentSuccess()
      }
    })
  }

  render() {
    var tabList = [{title: "首页", iconType: "home"}, {title: "我的", iconType: "user"}]
    return (
      <View className='appointment'>
        <AtTabBar
          fixed
          tabList={tabList}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        <AtTabs current={this.state.current} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0}>
            <View style='padding: 10px 0px;background-color: #FAFBFC;text-align: center;'>
              <AtSearchBar
                actionName='搜索'
                value={this.state.value}
                onChange={this.onSearch.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
              />
              {/*卡片开始*/}
              <View className='my-card-second'>
                <View className='my-info-second'>
                  <Text className='my-info-title'>就诊机构：</Text>
                  <Text>xxxxxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <Text className='my-info-title'>就诊科室：</Text>
                  <Text>xxxxxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <View className='my-info-left-second'>
                    <View>
                      <Text className='my-info-title'>就诊医师：</Text>
                      <Text>xxxxxxxx</Text>
                    </View>
                    <View>
                      <Text className='my-info-title'>挂号号别：</Text>
                      <Text>xxxxxxxx</Text>
                    </View>
                  </View>
                  <View className='my-info-right-second'>
                    <View>号码</View>
                  </View>
                </View>
              </View>
              {/*卡片结束*/}

              <View>
                <Picker className='my-picker' mode='selector' onChange={this.onTimeChange} range={this.state.rangeTime}
                       >
                  <AtList>
                    <AtListItem title='当前时间' extraText={this.state.dateSel}/>
                  </AtList>
                </Picker>
                <Picker className='my-picker' mode='selector' onChange={this.onNameChange} range={this.state.nameList}>
                  <AtList>
                    <AtListItem title='就诊人姓名' extraText={this.state.nameSel}/>
                  </AtList>
                </Picker>
                <AtForm>
                  <AtInput
                    name='value4'
                    title='身份证码'
                    type='idcard'
                    placeholder='身份证号码'
                    value={this.state.value4}
                    onChange={this.handleChange.bind(this)}
                  />
                  <AtInput
                    name='value6'
                    border={false}
                    title='手机号码'
                    type='phone'
                    placeholder='手机号码'
                    value={this.state.value6}
                    onChange={this.handleChange.bind(this)}
                  />
                </AtForm>
              </View>
              <AtButton type='primary' circle='true' onClick={this.addRegisterRef}>确认</AtButton>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
        </AtTabs>
      </
        View>
    )
  }
}
